<template>
  <div class="app-container">
    <div id="addgoods">
      <div
        class="infinite-list"
        v-infinite-scroll="load"
        style="overflow: auto"
      >
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="height: 600px"
        >
          <el-tab-pane label="基础信息" name="基础信息">
            <el-form
              ref="form"
              :rules="rules"
              :model="form"
              label-width="120px"
              style="margin-top: 15px"
            >
              <el-form-item label="商品类型：" prop="type">
                <el-radio-group v-model="radio1" @change="shitType">
                  <el-radio v-model="radio1" label="1" border
                    >普通商品</el-radio
                  >
                  <el-radio v-model="radio1" label="2" border
                    >卡密商品</el-radio
                  >
                  <el-radio v-model="radio1" label="3" border
                    >虚拟商品</el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="供应商id：" prop="supplier_id">
                <el-select
                  @change="changes"
                  v-model="form.supplier_id"
                  placeholder="请选择"
                  style="width: 510px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.supplier_name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品名称：" prop="goods_name">
                <el-input
                  v-model="form.goods_name"
                  placeholder="请输入商品名称"
                  style="width: 510px"
                ></el-input>
              </el-form-item>
              <el-form-item label="副标题：" prop="sub_title">
                <el-input
                  v-model="form.sub_title"
                  placeholder="请输入商品副标题"
                  style="width: 510px"
                ></el-input>
              </el-form-item>
              <el-form-item label="类目ID：" prop="category_id">
                <el-cascader
                  v-model="svalue"
                  :options="typeData"
                  :props="{
                    expandTrigger: 'hover',
                    checkStrictly: true,
                    value: 'id',
                    label: 'category_name',
                  }"
                  @change="handleChange"
                  placeholder="请选择类目"
                  style="width: 510px"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="商品主图：" prop="main_image">
                <logo-upload
                  :single-file="main_images"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="logoCallback"
                  style="width: 90px; height: 90px"
                />
              </el-form-item>

              <el-form-item label="商品缩略图：" prop="thumbnail">
                <logo-upload
                  :single-file="thumbnails"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="logoCallbacks"
                />
              </el-form-item>
              <el-form-item label="商品轮播图：" prop="slider_image">
                <logo-upload
                  :file-list="slider_images"
                  :show-file-list="true"
                  accept="image/jpeg, image/png"
                  @uploadCallback="logoCallbackss"
                />
              </el-form-item>
              <el-form-item label="状态是否正常：" prop="status">
                <el-switch
                  v-model="form.status"
                  active-color="#2d8cf0"
                  inactive-color="#ccc"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </el-form-item>

              <el-form-item label="排序：" prop="sort">
                <el-input
                  v-model="form.sort"
                  style="width: 510px"
                  placeholder="请输入排序"
                ></el-input>
              </el-form-item>
              <el-form-item label="编码：" prop="product_code">
                <el-input
                  v-model="form.product_code"
                  style="width: 510px"
                  placeholder="选填"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  placeholder="请输入..."
                  style="width: 510px"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- <el-tab-pane label="规格库存" name="规格库存">
             
              <el-form ref="forms" :rules="ruless" :model="forms" label-width="120px" style="margin-top: 15px;" v-if="namesku == '单'">
               
                <el-form-item label="规格名称：" prop="sku_name">
                  <el-input v-model="forms.sku_name" placeholder="请输入规格名称" style="width:510px"></el-input>
                </el-form-item>
                <el-form-item label="零售价：" prop="retail_price">
                  <el-input v-model="forms.retail_price" placeholder="请输入商品零售价" style="width:510px"></el-input>
                </el-form-item>
                <el-form-item label="成本价：" prop="cost_price">
                  <el-input v-model="forms.cost_price" placeholder="请输入商品成本价" style="width:510px"></el-input>
                </el-form-item>
                <el-form-item label="库存：" prop="inventory">
                  <el-input v-model="forms.inventory" placeholder="请输入商品库存" style="width:510px"></el-input>
                </el-form-item>
                <el-form-item label="产品码：" prop="code">
                  <el-input v-model="forms.code" placeholder="请输入商品产品码" style="width:510px"></el-input>
                </el-form-item>
                <el-form-item label="库存预警：" prop="inventory_alert">
                  <el-input
                    v-model="forms.inventory_alert"
                    type="number"
                    maxlength="10"
                    show-word-limit
                    placeholder="请输入库存预警"
                    style="width: 510px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="单位：" prop="unit">
                  <el-select  @change="changesku" v-model="form.unit" placeholder="请选择" style="width: 510px;">
                    <el-option v-for="item in skulist" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="图片：" prop="sku_img">
                  <logo-upload :single-file="forms.sku_imgs" :show-file-list="false" accept="image/jpeg, image/png"
                    @uploadCallback="skuCallback" style="width: 90px;height: 90px;" />
                </el-form-item>
           
              </el-form>
              <el-form ref="forms" :rules="ruless" :model="forms" label-width="120px" v-else>
              </el-form>
            </el-tab-pane> -->
          <el-tab-pane label="商品详情" name="商品详情">
            <div style="margin-top: 15px">
              <tinymce-editor v-model="form.content" :height="500" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="物流设置" name="物流设置">
            <el-form label-width="100px">
              <el-form-item
                label="配送方式："
                prop="delivery"
                style="margin-top: 15px"
              >
                <el-checkbox-group v-model="checkboxGroup1" size="small">
                  <el-checkbox label="快递"></el-checkbox>
                  <el-checkbox label="门店配送"></el-checkbox>
                  <el-checkbox label="到店自提"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="运费设置：">
                <el-input
                  v-model="form.shipping_fee"
                  placeholder="请输入运费"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div style="text-align: center">
      <el-button
        type="primary"
        v-if="activeName != '基础信息'"
        @click="backstep"
        >上一步</el-button
      >
      <el-button
        type="primary"
        v-if="activeName == '物流设置'"
        @click="submitsave('form')"
        >保存</el-button
      >
      <el-button
        type="primary"
        v-if="activeName == '基础信息'"
        @click="submitForm('form')"
        >下一步</el-button
      >
      <el-button
        type="primary"
        v-if="activeName == '规格库存'"
        @click="nextinventory('forms')"
        >下一步</el-button
      >
      <el-button
        type="primary"
        v-if="activeName == '商品详情'"
        @click="nextstep"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import LogoUpload from "@/components/FileUpload";
import TinymceEditor from "@/components/Tinymce";
import {
  getSupplierGoodsInfo,
  GoodsCateList,
  supplierLists,
  addsuppliergoods,
  getLabelList,
} from "@/api/supplier/index";
import { number } from "echarts/core";

export default {
  name: "add",
  components: { LogoUpload, TinymceEditor },
  props: {
    ida: {
      type: number,
      default: false,
    },
  },
  data() {
    return {
      checked1: true,
      checked2: false,
      checked3: false,
      checked4: true,
      checkboxGroup1: [],
      checkboxGroup2: [],
      activeName: "基础信息",
      svalue: "",
      options: [],
      values: "点击关闭",
      value: "",
      radio1: "1",
      namesku: "单",
      forms: {
        sku_name: "", //规格名称
        retail_price: "", //零售价
        cost_price: "", //成本价
        inventory: "", //库存
        code: "", //产品码
        inventory_alert: "", //库存预警
        unit: "", //单位
        sku_img: "", //规格图片
      },
      sku_imgs: {}, //规格图片
      form: {
        id: "",
        supplier_id: "", //供应商ID
        sub_title: "", //副标题
        type: 1, //商品类型
        goods_name: "", //商品名字
        category_id: "", //类目ID

        thumbnail: "",

        main_image: "",
        slider_image: "",

        shipping_fee: "", //运费
        status: "1", //状态
        sort: "", //排序
        remark: "", //备注
        product_code: "", //编码
        content: "", //商品详情
      },
      main_images: {},
      slider_images: [],
      thumbnails: {},
      rules: {
        supplier_id: [
          { required: true, message: "请选择供应商", trigger: "change" },
        ],
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        sub_title: [
          { required: true, message: "请选择副标题", trigger: "change" },
        ],
        category_id: [
          { required: true, message: "请选择类目ID", trigger: "change" },
        ],
        main_image: [
          { required: true, message: "请上传主图", trigger: "change" },
        ],
        thumbnail: [
          { required: true, message: "请上传缩略图", trigger: "change" },
        ],
        slider_image: [
          { required: true, message: "请上传轮播图", trigger: "change" },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "change" }],
      }, //表单验证
      ruless: {
        sku_name: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
        retail_price: [
          { required: true, message: "请输入零售价", trigger: "blur" },
        ],
        cost_price: [
          { required: true, message: "请输入成本价", trigger: "blur" },
        ],
        inventory: [{ required: true, message: "请输入库存", trigger: "blur" }],
        code: [{ required: true, message: "请输入产品码", trigger: "blur" }],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
        sku_img: [{ required: true, message: "请上传图片", trigger: "change" }],
      }, //表单验证
      tableData: [], //列表
      typeData: [], //类目list
      skulist: [], //单位list

      activename: "基础信息",
    };
  },
  created() {
    const id = this.ida;
    this.getdetail(id);
    this.getcartlist(); //类目列表
    this.SupplierLists(); //供应商列表
    this.SupplierskuLists(); //规格单位列表
  },
  methods: {
    //xiangiqng
    getdetail(id) {
      let param = {
        id: id,
      };
      getSupplierGoodsInfo(param).then((res) => {
        this.form = res.data;
        this.svalue = res.data.category1_id;
        console.log(this.svalue);
        this.radio1 = String(res.data.type);
        this.form.status = String(res.data.status);
        let obj = {
          url: res.data.main_image,
        };
        this.main_images = obj;
        let objs = {
          url: res.data.thumbnail,
        };
        this.thumbnails = objs;
        let arr = [];
        let arrays = {};
        res.data.slider_image.forEach((item) => {
          arrays.url = item;
          arr.push(arrays);
        });
        console.log(arr);
        this.slider_images = arr;
      });
    },
    //切换供应商ID
    changes(val) {
      this.form.supplier_id = val;
      console.log(this.form.supplier_id);
    },
    //切换规格单元
    changesku(val) {
      this.forms.unit = val;
    },
    //中间滚动
    load() {},
    //上一步
    backstep() {
      if (this.activename == "规格库存") {
        this.activeName = "基础信息";
        this.activename = "基础信息";
      }
      if (this.activename == "商品详情") {
        this.activeName = "规格库存";
        this.activename = "规格库存";
      }
      if (this.activename == "物流设置") {
        this.activeName = "商品详情";
        this.activename = "商品详情";
      }
    },
    //下一步
    nextstep() {
      if (this.activename == "商品详情") {
        this.activeName = "物流设置";
        this.activename = "物流设置";
        return;
      }
    },
    //切换商品类型
    shitType(i) {
      this.form.category_id = i;
    },
    //切换规格多还是单
    shitTypes(i) {},
    handleClick(tab, event) {
      this.activename = tab._props.name;
    },
    //保存
    submitsave(formName) {
      // console.log(this.form, "888888888888")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addsuppliergoods(this.form).then((res) => {
            this.$messages.success("添加成功");
            setTimeout(() => {
              this.$router.back();
            }, 1500);
          });
        } else {
          this.$messages.warning("请完善信息");
          return false;
        }
      });
    },
    //规格tab点下一步
    nextinventory(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.activeName = "商品详情";
          this.activename = "商品详情";
          // addsuppliergoods(this.form).then((res) => {
          //   this.$messages.success('添加成功')
          //   setTimeout(() => {
          //     this.$router.back()
          //   }, 1500)
          // })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //确认提交表单
    submitForm(formName) {
      // console.log(this.form, "888888888888")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.activeName = "规格库存";
          this.activename = "规格库存";
          // addsuppliergoods(this.form).then((res) => {
          //   this.$messages.success('添加成功')
          //   setTimeout(() => {
          //     this.$router.back()
          //   }, 1500)
          // })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 规格上传回调
    skuCallback(singleFile) {
      this.sku_imgs = singleFile;
      this.forms.sku_img = singleFile.url;
    },
    // 文件上传回调
    logoCallback(singleFile) {
      this.main_images = singleFile;
      this.form.main_image = singleFile.url;
    },
    // 文件上传回调
    logoCallbacks(singleFile) {
      this.thumbnails = singleFile;
      this.form.thumbnail = singleFile.url;
    },
    // 文件上传回调
    logoCallbackss(singleFile) {
      this.slider_images = singleFile;
      let obj = [];
      singleFile.forEach((item) => {
        obj.push(item.url);
      });
      let banners = obj.join();

      this.form.slider_image = banners;
    },
    //类目ID选中
    handleChange(value) {
      const length = value.length;
      const lastValue = value[length - 1];
      this.form.category_id = lastValue;
    },
    //供应商列表
    SupplierLists() {
      supplierLists().then((res) => {
        this.options = res.data;
      });
    },
    //类目列表
    getcartlist() {
      GoodsCateList().then((res) => {
        this.typeData = res.data;
      });
    },
    //sku单位列表
    SupplierskuLists() {
      getLabelList().then((res) => {
        this.skulist = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}

.fleximg {
  font-size: 12px;
  display: flex;
  align-items: center;
  color: #606266;
}

#addgoods .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>
